<template>
  <!-- 只读状态显示 -->
  <span v-if="readonly" :style="readonlyStyle">
    {{ displayValue }}
  </span>

  <!-- 可编辑状态显示 -->
  <div v-else class="input-container">
    <div class="input-with-dropdown" >
      <el-input 
        :model-value="inputDisplayValue" 
        @update:modelValue="handleInput" 
        :disabled="disabled" 
        :placeholder="placeholder"
        :maxlength="maxlength" 
        :show-word-limit="showWordLimit" 
        :type="inputType" 
        :clearable="clearable"
        :style="{ width: inputWidth }" 
      />
      <el-dropdown @command="handleDropdownSelect" trigger="click">
        <el-button :disabled="disabled" class="dropdown-button">
          <el-icon><ArrowDown /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item 
              v-for="option in finessOptions" 
              :key="option.value" 
              :command="option.value">
              {{ option.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>  
    <slot></slot>
  </div>
</template>

<script>
import { Definition } from '../../engine/common/definition';
import { Util } from '../../utils/util';
import { ArrowDown } from '@element-plus/icons-vue';

export default {
  name: 'MetalFinessInputCell',
  components: {
    ArrowDown
  },
  props: {
    modelValue: {
      type: [String, Number],
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: Number,
      default: null
    },
    showWordLimit: {
      type: Boolean,
      default: false
    },
    numberMode: {
      type: Boolean,
      default: false
    },
    precision: {
      type: Number,
      default: null
    },
    width: {
      type: String,
      default: '100%'
    },
    readonlyWidth: {
      type: String,
      default: null
    },
    clearable: {
      type: Boolean,
      default: false
    },
    remarkMode: {
      type: Boolean,
      default: false
    },
  },

  emits: ['update:modelValue'],

  data() {
    return {
      finessOptions: [
        { value: 1000, label: '24K' },       
      ]
    }
  },

  computed: {
    inputType() {
      return this.remarkMode ? 'textarea' :
        this.numberMode ? 'number' :
          'input'
    },

    displayValue() {
      // When value is 1000, display as 24K
      if (this.modelValue === 1000 || this.modelValue === '1000') {
        return '24K';
      }
      return (this.modelValue || '--');
    },

    inputDisplayValue() {
      // When value is 1000, display as 24K in the input field
      if (this.modelValue === 1000 || this.modelValue === '1000') {
        return '24K';
      }
      return this.modelValue;
    },

    inputWidth() {
      // Calculate input width to leave space for the dropdown button
      if (this.width === '100%') {
        return 'calc(100% - 24px)'; // Reduced from 32px to 24px for a larger input field
      }
      // If width is specified in px, subtract button width
      if (this.width.endsWith('px')) {
        const numWidth = parseInt(this.width);
        return (numWidth - 24) + 'px'; // Reduced from 32px to 24px
      }
      return this.width;
    },

    inputMaxLength() {
      if (this.maxLength) {
        return this.maxLength;
      } else {
        return this.remarkMode ? Definition.maxTextLenForRemark : Definition.maxTextLenForCommonTextfield;
      }
    },
    
    readonlyStyle() {
      if (this.readonlyWidth) {
        return { width: this.readonlyWidth, display: 'inline-block' };
      }
      return {};
    },
  },

  methods: {
    handleInput(value) {
      // Convert "24K" back to 1000 when input
      if (value === '24K' || value === '24k') {
        this.$emit('update:modelValue', 1000);
        return;
      }
      
      if (this.numberMode) {
        try {
          value = Number(value)
          if (this.precision) {
            value = Util.convertWithPrecision(value, this.precision, true)
          }
        } catch (e) {
          console.error("TableCellInput handle number input error: ", e);
        }
      }
      this.$emit('update:modelValue', value)
    },

    handleDropdownSelect(value) {
      this.$emit('update:modelValue', value);
    }
  }
}
</script>

<style scoped>
.input-container {
  display: block;
  width: 100%;
  text-align: left;
}

.input-container :deep(.el-input) {
  width: 100%;
}

.input-container :deep(.el-input__inner) {
  text-align: left !important;
}

.input-with-dropdown {
  display: flex;
  align-items: center;
}

.dropdown-button {
  margin-left: 4px;
  padding: 8px;
  min-width: 24px; /* Reduced from default to give more space to input */
}
</style>